<template>

  <view class="expand_table">
    <view style="overflow: auto">
      <scroll-view :scroll-x="true">
        <view class="th">
          <view class="td sticky" style="left: 0; width: 50rpx;"></view>
          <template v-for="(header, index) in headerList">
            <view class="td" :key="index" :class="{'sticky':header.fixed}"
              :style="{width: header.width || '150rpx', left: header.fixed ? getLeft(index) : null, 'justify-content': header.align ? header.align : 'center'}">
              <text>{{header.label}}</text>
            </view>
          </template>
        </view>
        <view v-for="(item, ind) in list" :key="ind" class="row" @click="showIcons(item) && expandChange(item)">
          <view class="tr" :class="{disabled:item.disabled}">
            <view class="td sticky" style="left: 0;width: 50rpx;">
              <uni-icons v-if="showIcons(item)" :type="item.expanded ? 'bottom' : 'right'" size="14"
                :color="isHighlight ? '#409EFE' : '#666666'"></uni-icons>
            </view>
            <template v-for="(header, index) in headerList">
              <view class="td" :class="{'sticky':header.fixed}" :key="index"
                :style="{width: header.width || '150rpx', left: header.fixed ? getLeft(index) : null, 'justify-content': header.align ? header.align : 'center'}">
                <text :class="{ 
                    'up-sign': header.dataKey===signKey && item[header.dataKey]>0,
                    'down-sign': header.dataKey===signKey && item[header.dataKey]<0 
                  }">{{header.dataKey===signKey && item[header.dataKey]>0 ? '+' : ''}}{{
                  header.dataKey == 'index'
                  ? ind+1 : item[header.dataKey] }}</text>
              </view>
            </template>
          </view>
          <view v-if="item.expanded" class="children">
            <view class="row">
              <view v-for="(child, indexChild) in item.children || []" :key="indexChild" class="tr">
                <view class="td sticky" style="left: 0;width: 50rpx;">
                </view>
                <template v-for="(header, index) in headerList">
                  <view class="td" :class="{'sticky':header.fixed}" :key="index"
                    :style="{width: header.width || '150rpx', left: header.fixed ? getLeft(index) : null, 'justify-content': header.align ? header.align : 'center'}">
                    <text :class="{ 
                      'up-sign': header.dataKey===signKey && child[header.dataKey]>0,
                      'down-sign': header.dataKey===signKey && child[header.dataKey]<0 
                    }">{{header.dataKey===signKey && child[header.dataKey]>0 ? '+' : ''}}{{ header.dataKey == 'index' ?
                      ind+1 : child[header.dataKey] }}</text>
                  </view>
                </template>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "expandTable",
    props: {
      headerList: {
        type: Array,
        default: []
      },
      dataSource: {
        type: Array,
        default: []
      },
      isHighlight: {
        type: Boolean,
        default: false
      },
      uniqueKey: {
        type: String,
        default: undefined
      },
      signKey: {
        type: String,
        default: undefined
      }
    },
    computed: {
      getLeft() {
        return (index) => {
          if (index === 0) {
            return '50rpx'
          }
          const list = this.headerList.filter((e, v) => v < index)
          const wList = list.map(e => {
            if (e.width) {
              return Number(e.width.replace('rpx', ''))
            }
            return 150
          })
          const sum = [50, ...wList].reduce((a, b) => a + b, 0)
          return `${sum}rpx`
        }
      },
      showIcons() {
        return (data) => {
          return data.children?.length
        }
      }
    },
    watch: {
      dataSource: {
        handler(value) {
          this.list = value
        },
        immediate: true,
        deep: true
      }
    },
    data() {
      return {
        list: []
      };
    },
    mounted() { },
    methods: {
      expandChange(item) {
        this.list = this.list.map(e => {
          if (item[this.uniqueKey] === e[this.uniqueKey]) {
            e.expanded = !e.expanded
          }
          return e
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .expand_table {
    background: #fff;
    display: flex;

    .row:nth-child(odd) {
      .tr {
        background-color: #F4F7FF;

        .td {
          background-color: #F4F7FF;
        }
      }
    }

    .row:nth-child(even) {
      .tr {
        background-color: #ffffff;

        .td {
          background-color: #ffffff;
        }
      }
    }

    .row:nth-child(2) {
      >.tr .td {
        color: #409EFE !important;
      }
    }

    .expanded {
      .tr {
        background-color: #e8f4ff;
      }
    }

    .th,
    .tr {
      display: flex;
      flex-wrap: nowrap;
      width: fit-content;
    }

    .th {
      .td {
        color: #888888;
        background-color: #F4F7FF;
      }
    }

    .td {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      height: 80rpx;
      font-size: 24rpx;
      color: #333;
      padding: 0 14rpx;
      box-sizing: border-box;
    }

    .td:first-child {
      padding: 0 0 0 20rpx;
    }

    .children {
      width: 100%;
    }

    .sticky {
      z-index: 2;
      position: sticky;
    }

    .up-sign {
      color: #FF4D4F !important;
    }

    .down-sign {
      color: #27B57D !important;
    }
  }
</style>